<template>
  <div>
    <el-row type="flex">
      <el-col :span="4" :style="{ height: heightTree }">
        <el-tree
          style="margin-left: 10px; margin-top: 20px"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col
        class="formWarp"
        :span="20"
        style="margin-left: 10px; overflow-y: scroll"
        :style="{ height: heightTree }"
      >
        <h2 style="text-align: center; font-size: 30px">
          大 组 工 网 管 理 人 员 备 案 表
        </h2>
        <div
          style="display: flex; justify-content: flex-end; margin-right: 20px"
        >
          <el-button type="primary" plain @click="handlExport" size="medium"
            >导 出</el-button
          >
        </div>
        <div class="infohead">
          <p>
            填报单位:<input v-model="fillingOrg" readonly class="inputVal" />
          </p>
          <p>
            填表人:<input v-model="fillingPerson" readonly class="inputVal" />
          </p>
          <p>
            联系方式:<input v-model="fillingTel" readonly class="inputVal" />
          </p>
        </div>
        <div
          class="tableWarp"
          :style="{ height: heightTable }"
          style="overflow-y: scroll; margin-top: 10px"
        >
          <table border="1" class="myTable">
            <tr>
              <td
                colspan="6"
                style="text-align: left; font-size: 16px"
                class="bgtd"
              >
                一、大组工网网络安全管理人员配备情况
              </td>
            </tr>
            <tr class="bgtd">
              <td>人员类型</td>
              <td>姓名</td>
              <td>部门</td>
              <td>职务</td>
              <td>办公电话</td>
              <td>手机号码</td>
            </tr>
            <tr>
              <td class="bgtd">系统管理员</td>
              <td style="text-align: center">
                <el-input readonly v-model="netSafeAdminName" />
              </td>
              <td><el-input readonly v-model="netSafeAdminDepartment" /></td>
              <td><el-input readonly v-model="netSafeAdminPost" /></td>
              <td><el-input readonly v-model="netSafeAdminTel" /></td>
              <td><el-input readonly v-model="netSafeAdminPhone" /></td>
            </tr>
            <tr>
              <td class="bgtd">安全保密管理员</td>
              <td><el-input readonly v-model="netSafeSecrecyName" /></td>
              <td><el-input readonly v-model="netSafeSecrecyDepartment" /></td>
              <td><el-input readonly v-model="netSafeSecrecyPost" /></td>
              <td><el-input readonly v-model="netSafeSecrecyTel" /></td>
              <td><el-input readonly v-model="netSafeSecrecyPhone" /></td>
            </tr>
            <tr>
              <td class="bgtd">安全审计员</td>
              <td><el-input readonly v-model="netSafeAuditName" /></td>
              <td><el-input readonly v-model="netSafeAuditDepartment" /></td>
              <td><el-input readonly v-model="netSafeAuditPost" /></td>
              <td><el-input readonly v-model="netSafeAuditTel" /></td>
              <td><el-input readonly v-model="netSafeAuditPhone" /></td>
            </tr>
            <tr>
              <td
                colspan="6"
                style="text-align: left; font-size: 16px"
                class="bgtd"
              >
                二、大组工网网站管理人员配备情况
              </td>
            </tr>
            <tr class="bgtd">
              <td>人员类型</td>
              <td>姓名</td>
              <td>部门</td>
              <td>职务</td>
              <td>办公电话</td>
              <td>手机号码</td>
            </tr>
            <tr>
              <td class="bgtd">系统管理员</td>
              <td><el-input readonly v-model="netManagerAdminName" /></td>
              <td><el-input readonly v-model="netManagerAdminDepartment" /></td>
              <td><el-input readonly v-model="netManagerAdminPost" /></td>
              <td><el-input readonly v-model="netManagerAdminTel" /></td>
              <td><el-input readonly v-model="netManagerAdminPhone" /></td>
            </tr>
            <tr>
              <td class="bgtd">安全保密管理员</td>
              <td><el-input readonly v-model="netManagerSecrecyName" /></td>
              <td>
                <el-input readonly v-model="netManagerSecrecyDepartment" />
              </td>
              <td><el-input readonly v-model="netManagerSecrecyPost" /></td>
              <td><el-input readonly v-model="netManagerSecrecyTel" /></td>
              <td><el-input readonly v-model="netManagerSecrecyPhone" /></td>
            </tr>
            <tr>
              <td class="bgtd">安全审计员</td>
              <td><el-input readonly v-model="netManagerAuditName" /></td>
              <td><el-input readonly v-model="netManagerAuditDepartment" /></td>
              <td><el-input readonly v-model="netManagerAuditPost" /></td>
              <td><el-input readonly v-model="netManagerAuditTel" /></td>
              <td><el-input readonly v-model="netManagerAuditPhone" /></td>
            </tr>
            <tr>
              <td
                colspan="6"
                style="text-align: left; font-size: 16px"
                class="bgtd"
              >
                三、省委组织部大组工网电子邮件系统管理人员配备情况
              </td>
            </tr>
            <tr class="bgtd">
              <td>人员类型</td>
              <td>姓名</td>
              <td>部门</td>
              <td>职务</td>
              <td>办公电话</td>
              <td>手机号码</td>
            </tr>
            <tr>
              <td class="bgtd">系统管理员</td>
              <td><el-input readonly v-model="netEamilAdminName" /></td>
              <td><el-input readonly v-model="netEamilAdminDepartment" /></td>
              <td><el-input readonly v-model="netEamilAdminPost" /></td>
              <td><el-input readonly v-model="netEamilAdminTel" /></td>
              <td><el-input readonly v-model="netEamilAdminPhone" /></td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getPersonList,
  getOrgTree,
  dzgwManagerPerson,
} from "@/api/datacentersg/personnelPut/personnelPut.js";
import store from "@/store";
export default {
  data() {
    return {
      title: "",
      fillingOrg: "",
      fillingPerson: "",
      fillingTel: "",
      netSafeAdminName: "",
      netSafeAdminPost: "",
      netSafeAdminDepartment: "",
      netSafeAdminTel: "",
      netSafeAdminPhone: "",
      netSafeSecrecyName: "",
      netSafeSecrecyPost: "",
      netSafeSecrecyDepartment: "",
      netSafeSecrecyTel: "",
      netSafeSecrecyPhone: "",
      netSafeAuditName: "",
      netSafeAuditPost: "",
      netSafeAuditDepartment: "",
      netSafeAuditTel: "",
      netSafeAuditPhone: "",
      netManagerAdminName: "",
      netManagerAdminPost: "",
      netManagerAdminDepartment: "",
      netManagerAdminTel: "",
      netManagerAdminPhone: "",
      netManagerSecrecyName: "",
      netManagerSecrecyPost: "",
      netManagerSecrecyDepartment: "",
      netManagerSecrecyTel: "",
      netManagerSecrecyPhone: "",
      netManagerAuditName: "",
      netManagerAuditPost: "",
      netManagerAuditDepartment: "",
      netManagerAuditTel: "",
      netManagerAuditPhone: "",
      netEamilAdminName: "",
      netEamilAdminPost: "",
      netEamilAdminDepartment: "",
      netEamilAdminTel: "",
      netEamilAdminPhone: "",
      heightTree: window.innerHeight - 130 + "px",
      heightTable: window.innerHeight - 250 + "px",
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      dataLabel: "",
    };
  },
  created() {
    this.getTree();
    this.$watch("dataLabel", (newVal, oldVal) => {
      if (newVal) {
        this.getList();
      } else {
        this.$message({
          message: "请先选择机构",
          type: "warning",
        });
      }
    });
  },
  methods: {
    getTree() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
      };
      getOrgTree(params).then((res) => {
        if (res.result) {
          this.data = res.resultdata;
        }
      });
    },
    getList() {
      this.clear();
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        type: "2",
        data: {
          status: "1",
          organization: this.dataLabel,
        },
      };
      getPersonList(params).then((result) => {
        if (result.resultdata) {
          this.fillingOrg = result.resultdata[0].fillingOrg;
          this.fillingPerson = result.resultdata[0].fillingPerson;
          this.fillingTel = result.resultdata[0].fillingTel;
          this.netSafeAdminName = result.resultdata[0].netSafeAdminName;
          this.netSafeAdminPost = result.resultdata[0].netSafeAdminPost;
          this.netSafeAdminDepartment =
            result.resultdata[0].netSafeAdminDepartment;
          this.netSafeAdminTel = result.resultdata[0].netSafeAdminTel;
          this.netSafeAdminPhone = result.resultdata[0].netSafeAdminPhone;
          this.netSafeSecrecyName = result.resultdata[0].netSafeSecrecyName;
          this.netSafeSecrecyPost = result.resultdata[0].netSafeSecrecyPost;
          this.netSafeSecrecyDepartment =
            result.resultdata[0].netSafeSecrecyDepartment;
          this.netSafeSecrecyTel = result.resultdata[0].netSafeSecrecyTel;
          this.netSafeSecrecyPhone = result.resultdata[0].netSafeSecrecyPhone;
          this.netSafeAuditName = result.resultdata[0].netSafeAuditName;
          this.netSafeAuditPost = result.resultdata[0].netSafeAuditPost;
          this.netSafeAuditDepartment =
            result.resultdata[0].netSafeAuditDepartment;
          this.netSafeAuditTel = result.resultdata[0].netSafeAuditTel;
          this.netSafeAuditPhone = result.resultdata[0].netSafeAuditPhone;
          this.netManagerAdminName = result.resultdata[0].netManagerAdminName;
          this.netManagerAdminPost = result.resultdata[0].netManagerAdminPost;
          this.netManagerAdminDepartment =
            result.resultdata[0].netManagerAdminDepartment;
          this.netManagerAdminTel = result.resultdata[0].netManagerAdminTel;
          this.netManagerAdminPhone = result.resultdata[0].netManagerAdminPhone;
          this.netManagerSecrecyName =
            result.resultdata[0].netManagerSecrecyName;
          this.netManagerSecrecyPost =
            result.resultdata[0].netManagerSecrecyPost;
          this.netManagerSecrecyDepartment =
            result.resultdata[0].netManagerSecrecyDepartment;
          this.netManagerSecrecyTel = result.resultdata[0].netManagerSecrecyTel;
          this.netManagerSecrecyPhone =
            result.resultdata[0].netManagerSecrecyPhone;
          this.netManagerAuditName = result.resultdata[0].netManagerAuditName;
          this.netManagerAuditPost = result.resultdata[0].netManagerAuditPost;
          this.netManagerAuditDepartment =
            result.resultdata[0].netManagerAuditDepartment;
          this.netManagerAuditTel = result.resultdata[0].netManagerAuditTel;
          this.netManagerAuditPhone = result.resultdata[0].netManagerAuditPhone;
          this.netEamilAdminName = result.resultdata[0].netEamilAdminName;
          this.netEamilAdminPost = result.resultdata[0].netEamilAdminPost;
          this.netEamilAdminDepartment =
            result.resultdata[0].netEamilAdminDepartment;
          this.netEamilAdminTel = result.resultdata[0].netEamilAdminTel;
          this.netEamilAdminPhone = result.resultdata[0].netEamilAdminPhone;
        }
      });
    },
    handleNodeClick(data) {
      console.log(data, "data");
      this.dataLabel = data.name;
    },
    downFile(data, fileName) {
      if (!data) {
        return;
      }
      if (typeof data === "string" && data.startsWith("http")) {
        // 判断是否是链接
        const iframe = document.createElement("iframe");
        iframe.style.display = "none";
        iframe.src = data;
        document.body.appendChild(iframe);
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 1000); // 等待 1 秒后销毁 iframe
      } else {
        const url = window.URL.createObjectURL(new Blob([data]));
        const a = document.createElement("a");
        a.style.display = "none";
        a.href = url;
        a.setAttribute("download", fileName);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
      }
    },
    // 导出
    handlExport() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          organization: this.dataLabel,
        },
      };

      // 人员备案导出
      dzgwManagerPerson(params)
        .then((result) => {
          this.downFile(result.resultdata, "人员备案表"); // 调用downFile方法进行文件下载
        })
        .catch((error) => {
          console.log(error);
        });
    },
    clear() {
      this.fillingOrg = "";
      this.fillingPerson = "";
      this.fillingTel = "";
      this.netSafeAdminName = "";
      this.netSafeAdminPost = "";
      this.netSafeAdminDepartment = "";
      this.netSafeAdminTel = "";
      this.netSafeAdminPhone = "";
      this.netSafeSecrecyName = "";
      this.netSafeSecrecyPost = "";
      this.netSafeSecrecyDepartment = "";
      this.netSafeSecrecyTel = "";
      this.netSafeSecrecyPhone = "";
      this.netSafeAuditName = "";
      this.netSafeAuditPost = "";
      this.netSafeAuditDepartment = "";
      this.netSafeAuditTel = "";
      this.netSafeAuditPhone = "";
      this.netManagerAdminName = "";
      this.netManagerAdminPost = "";
      this.netManagerAdminDepartment = "";
      this.netManagerAdminTel = "";
      this.netManagerAdminPhone = "";
      this.netManagerSecrecyName = "";
      this.netManagerSecrecyPost = "";
      this.netManagerSecrecyDepartment = "";
      this.netManagerSecrecyTel = "";
      this.netManagerSecrecyPhone = "";
      this.netManagerAuditName = "";
      this.netManagerAuditPost = "";
      this.netManagerAuditDepartment = "";
      this.netManagerAuditTel = "";
      this.netManagerAuditPhone = "";
      this.netEamilAdminName = "";
      this.netEamilAdminPost = "";
      this.netEamilAdminDepartment = "";
      this.netEamilAdminTel = "";
      this.netEamilAdminPhone = "";
    },
  },
};
</script>

<style scoped>
.el-col {
  background: #fff;
}
.tableWarp {
  scrollbar-color: #46a6ff #409eff;
}
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
  font-family: SimHei;
}
.myTable .bgtd {
  background: #b0e2ff !important;
}

.myTable tbody {
  width: 100%;
}

.myTable td {
  word-wrap: break-word;
  font-size: 16px;
  padding: 15px 10px;
  text-align: center;
}
.infohead {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0px 20px 0px;
  font-family: SimHei;
}
.infohead p {
  font-size: 18px;
}
.inputVal {
  border: none;
  border-bottom: 1px solid #000;
  font-size: 16px;
  font-family: SimSun;
  color: #000;
  margin-left: 10px;
  text-align: center;
}
>>> .el-input--small .el-input__inner {
  border: none;
  text-align: center;
  font-size: 16px;
  font-family: SimSun;
  color: #000;
}
>>> .el-tree-node__label {
  font-size: 16px;
}
</style>